<template>
  <div class="container-select">
    <!-- 这部分是label -->
    <!-- <span class="title-label" :style="{ width: labelWidth }">{{ label }}</span> -->
    <!-- 这部分是点击输入框跳出来的分页小弹窗 -->
    <el-popover placement="bottom" trigger="manual" v-model="visible">
      <el-table
        size="small"
        :data="list"
        highlight-current-row
        @row-click="changeTableRow"
        v-loading="listLoading"
      >
        <el-table-column
          :prop="nameProp"
          :label="nameLabel"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          v-if="other"
          :prop="otherProp"
          :label="otherLabel"
          align="center"
        ></el-table-column>
        <el-table-column
      
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">选择</el-button>
      </template>
    </el-table-column>
      </el-table>
      <TablePager
          :size="params.pageSize"
          :pageChange="getList"
          :show-total="params.showTotal"
          :total="total"
          layout="prev, pager, next"
          :current="params.pageNum"
      />
      <div slot="reference" >
        <div style="position:relative">
          <el-input
            id="keydown"
            v-model="inputValuel2"
            :placeholder="placeholder"
            @input="onChange"
          ></el-input>
          <i class="el-icon-success" v-if="choss" style="color:#6fe900;position: absolute;top: 30%;left: 271px;"></i>
          
          
       <el-button style="position: absolute;left: 330px;" @click="search" type="primary">查询</el-button>
        </div>
        
      </div>
    </el-popover>
  </div>
</template>

<script>
// 这是分页组件。。用el-pagination也可以
import TablePager from "@/components/Pager";

export default {
  components: {
    TablePager,
  },
  data(){
      return {
          inputValuel2: this.inputValue,
          listdata:[],
          choss: false,
          visible: false
      }
  },
  props: {
    labelWidth: {
      type: String,
      default: "70px",
    },
    label: {
      type: String,
      default: "分组名称：",
    },
    // 控制popover显隐的属性
    // visible: {
    //   type: Boolean,
    //   default: false,
    // },
    // 列表数据
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 列表loading
    listLoading: {
      type: Boolean,
      default: false,
    },
    // 列表属性1
    nameProp: {
      type: String,
      default: "",
    },
    descProp: {
      type: String,
      default:''
    },//额外描述属性
    descLabel: {
      type: String,
      default: "",
    },
    idProp: {
      type: String,
      default: "id",
    },
    // 列表label 1
    nameLabel: {
      type: String,
      default: "名称",
    },
    // 另一个属性。有就为true，妹有就false
    // 这页只显示一列机构名儿，别的页面有时会要求显示电话啊啥的
    other: {
      type: Boolean,
      default: false,
    },
    otherProp: {
      type: String,
      default: "",
    },
    otherLabel: {
      type: String,
      default: "名称",
    },
    // 分页所需参数
    params: {
      type: Object,
      default: () => {},
    },
    // 输入框内容
    inputValue: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "请输入手机号搜索",
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  // created(){
  //   console.log('props',this.inputValuel2)
  //   this.list =[]
  // },
  methods: {
    // 点击行
    changeTableRow(row) {
        // console.log('changeTableRow', row, row[this.nameProp])
        this.choss=true
        this.$emit("onEnterValue", row[this.idProp]);
      this.inputValuel2 = row[this.otherProp];  // input中显示列表中选择的数据
      this.code = row[this.otherProp];  // 保存选中行的code
      this.visible = false;  // 选中行则popover消失
      
    },
    handleClick(){},
    // 获取数据
    getList() {
      this.$emit("getList", this.params);
    },
    // 改变input值
    onChange(value) {
      if (value == "") {
        this.inputValuel2 = "";
        this.$emit("onChangeClear");
      }
      this.inputValuel2 = value
      
    },
    search(){
      this.visible = true
      this.$emit("onChangeOrganizeValue", this.inputValuel2);
    },
    // keyDown(e){
    //     //如果是回车则执行登录方法
    //     // console.log('keyDown',this.inputValuel2)
    //   if(e.keyCode == 13){
    //     this.$emit("onChangeOrganizeValue", this.inputValuel2);
    //   }
    // },
  },
  mounted(){
    //绑定事件
    //  window.addEventListener('keydown',this.keyDown);
  },
  // destroyed(){
  //       window.removeEventListener('keydown',this.keyDown,false);
  // }
};
</script>

<style lang="scss" scoped>
// .el-input {
//   width: 300px;
// }
.el-input__inner {
    width: 50px !important;
}
.title-label {
  display: inline-block;
  text-align: right;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
}
.popover {
  background: red;
}
</style>